<template>
	<view class="page">
		<uNavbar :title="title" :titleStyle="titleStyle" bgColor="#10191F" leftIconColor="#ffffff"></uNavbar>
		<view class="content">
			<view class="top border">
				<view class="top-tip">
					<text class="h2">{{top.title}}</text>
				</view>
				<!-- 当前可用总余额 -->
				<view class="top-price">
					<view class="top-price-left">
						<text class="h1">￥</text>
					</view>
					<view class="top-price-right">
						<view class="text-parent">
							<text class="h1">{{top.total}}</text>
						</view>
					</view>

				</view>
				<!-- 市场交易余额 + 福合元宝 -->
				<view class="top-rail">
					<!-- 市场交易余额 -->
					<view class="rail">
						<!-- 标题 -->
						<view class="rail-title" @click="tipClick()">
							<text class="h2 overflow2">{{top.deal.title}}</text>
							<!-- <view class="icon">
								<u-icon name="question-circle" color="#3390AC"></u-icon>
							</view> -->
						</view>
						<!-- 余额值 -->
						<view class="rail-price">
							<view class="text-parent">
								<text class="h2">￥{{top.deal.value}}</text>
							</view>
						</view>
						<!-- 提现按钮 -->
						<text class="btns h2" @click="cashClick()">提取</text>
					</view>
					<!-- 福合元宝 -->
					<view class="rail">
						<!-- 布局同上 -->
						<view class="rail-title">
							<text class="h2 overflow2">{{top.charge.title}}</text>
							<!-- <view class="icon">
								<u-icon name="question-circle" color="#3390AC"></u-icon>
							</view> -->
						</view>
						<view class="rail-price">
							<view class="text-parent">
								<text class="h2">￥{{top.charge.value}}</text>
							</view>
						</view>


						<text class="btns h2" @click="chargeClick()">去兑换</text>
						<!-- 版本2去掉提现 -->
						<!-- <text class="btns" @click="cashClick(1)">提现</text> -->
					</view>
				</view>
			</view>
			<!-- 下方列表 -->
			<view class="bottom border">
				<!--  列表头部tabs -->
				<view class="tabs">
					<view class="tab" v-for="(item,index) in tabs" :key="index" @click="tabSelect(index)">
						<text class="tab-title" :class="{active:item.select}">{{item.tab}}</text>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="divider" />
				<!-- 交易额变动列表 -->
				<view class="items" v-if="tabIndex === 0">
					<view class="item" v-for="(item,index) in datas" :key="index">
						<!-- item 左半部 -->
						<view class="item-left">
							<view class="item-lt">
								<text class="h2 overflow2">{{item.balance_type_desc}}</text>
							</view>
							<view class="item-lb">
								<text class="h3 overflow2">{{item.from_desc}}</text>
							</view>

						</view>
						<!-- item右半部 -->
						<view class="item-right">
							<view class="item-rt">
								<view class="item-price">
									<view class="ip-l">
										<text class="h2">￥</text>
									</view>
									<view class="ip-r">
										<view class="text-parent">
											<text class="h2">{{item.amount}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="item-rb">
								<text class="h3">{{item.create_time}}</text>
							</view>
						</view>
					</view>
					<!-- 空布局组件 -->
					<noDatas :xxxList="datas" :type="2" :status="status"></noDatas>
				</view>
				<!-- 配件记录列表 -->
				<view class="items" v-else>
					<!-- 布局同上 -->
					<view class="item" v-for="(item,index) in datas2" :key="index">
						<view class="item-left">
							<view class="item-lt">
								<text class="h2 overflow2">购买配件</text>
							</view>
							<view class="item-lb">
								<text class="h3 overflow2">{{item.name}}</text>
							</view>

						</view>
						<view class="item-right">
							<view class="item-rt">
								<view class="item-price">
									<view class="ip-l">
										<text class="h2">￥</text>
									</view>
									<view class="ip-r">
										<view class="text-parent">
											<text class="h2">{{item.price}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="item-rb">
								<text class="h3">{{item.transaction_time}}</text>
							</view>
						</view>
					</view>
					<noDatas :xxxList="datas2" :type="2" :status="status"></noDatas>
				</view>

			</view>

		</view>
		<!-- popup弹窗 -->
		<u-popup :show="tipPopup.show" mode="center" @close="closePopup" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">{{tipPopup.title}}</text>

				<!-- <text class="popup-label h2">{{popupLabel}}</text> -->
				<view class="popup-center">
					<text class="popup-balance h2">{{tipPopup.carpool_balance_desc}}</text>
					<text class="popup-front h2">{{tipPopup.front_proportion_desc}}</text>
					<!-- <text class="popup-label h2">{{popupLabel}}</text> -->
				</view>
				<text class="btns" @click="closePopup">确定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		carAccount,
		buyAccessoryList,
		carpoolingConfig
	} from '../../api/mycar.js';
	import {
		balanceList
	} from '../../api/other.js'

	export default {

		data() {
			return {
				isPageShow: false,
				title: '我的账户', //标题
				titleStyle: {
					color: '#ffffff' //标题白色
				},
				top: {
					//头部数据设置
					title: '当前可用总余额',
					total: '0.00',
					deal: {
						type: '0',
						title: '市场交易余额',
						value: '0.00'
					},
					charge: {
						type: '1',
						title: '福合元宝',
						value: '0.00'
					}
				},
				tabIndex: 0, //列表tab当前项
				tabs: [{
						index: 0,
						select: true,
						tab: '市场交易额变动' // tabs列表值
					},
					{
						index: 1,
						select: false,
						tab: '购买配件记录'
					}
				],
				datas: [], //市场交易额datas
				datas2: [], //购买配件记录datas
				page: 1,
				pageSize: 10,
				pageSize2: 10,
				status: 'loading', //空布局组件状态
				tipPopup: { //弹窗数据
					show: false,
					title: '市场交易额说明',
					type: '0',
					front_proportion: '',
					after_proportion: '',
					carpool_balance_desc:'',
					front_proportion_desc:'拼车完成前交易额兑换说明',
					after_proportion_desc:'拼车完成后交易额兑换说明',
				}
			}
		},
		methods: {
			//tabs切换方法
			tabSelect(index) {
				if (this.tabIndex !== index) {
					if (this.tabs.length > 0) {
						for (var i = 0; i < this.tabs.length; i++) {
							this.tabs[i].select = false;
						}
						this.tabs[index].select = true;
					}
					this.tabIndex = index
					this.refreshData()
				}
			},
			tipClick() { //弹窗点击
				this.showPopup()
			},
			cashClick() { //提现按钮点击 分为交易提现 和 福合元宝提现 根据情况添减
				uni.navigateTo({
					url: '/pagesMy/nationalCarPooling/withdrawal'
				})
			},
			chargeClick() {
				uni.navigateTo({
					url: '/pagesMy/mywallet/stjfdh'
				})
			},
			getAccountDetail() { //账户详情
				carAccount().then(res => {
					if (res.code === 1) {
						this.top.total = res.data.available_balance_total //当前可用总余额
						this.top.deal.value = res.data.carpool_balance //市场交易余额
						this.top.charge.value = res.data.balance_hf //福合元宝余额
					}
				})
			},
			getconfig() {
				carpoolingConfig().then(res => {
					if (res.code == 1) {
						this.tipPopup.front_proportion = res.data.complete_front_rought_proportion
						this.tipPopup.after_proportion = res.data.complete_after_rought_proportion
						
						this.tipPopup.carpool_balance_desc = res.data.carpool_balance_value
						this.tipPopup.front_proportion_desc = res.data.complete_front_rought_value
						this.tipPopup.after_proportion_desc = res.data.complete_after_rought_value
					}
				})
			},
			getDatas() {
				//获取市场交易额记录
				balanceList({
					page: this.page,
					type: 4
				}).then(res => {
					if (res.code == 1) {
						let list = res.data.data;
						this.datas = this.page == 1 ? list : this.datas.concat(list);
						// console.log(this.datas);
						if (list.length < this.pageSize) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			getDatas2() {
				//获取购买配件记录
				buyAccessoryList({
					page: this.page
				}).then(res => {
					if (res.code == 1) {
						//console.log(res);
						let list = res.data.data;
						this.datas2 = this.page == 1 ? list : this.datas2.concat(list);
						// console.log(this.datas2);
						if (list.length < this.pageSize2) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			refreshData() { //刷新
				this.getAccountDetail()
				this.getconfig()
				this.page = 1
				// 根据tabindex 刷新不同列表
				if (this.tabIndex === 0) {
					this.getDatas()
				} else {
					this.getDatas2()
				}
			},
			loadMore() { //加载更多
				if (this.status !== 'nomore') {
					this.page += 1
					if (this.tabIndex === 0) {
						this.getDatas()
					} else {
						this.getDatas2()
					}
				}
			},
			showPopup() { //显示弹窗
				this.tipPopup.show = true
			},
			closePopup() { //关闭弹窗
				this.tipPopup.show = false
			},

		},
		computed: {
			popupLabel() { //动态生成弹窗提示内容
				return '拼车完成前交易额兑换元宝比例(' + this.tipPopup.front_proportion + '交易额是1元宝),' +
					'拼车完成后交易额兑换元宝比例(' + this.tipPopup.after_proportion + '交易额是1元宝)'
			}
		},
		onLoad() {
			this.refreshData()
		},
		onShow() {
			if (this.isPageShow) {
				this.refreshData()
			}
			this.isPageShow = true
		},
		onPullDownRefresh() {
			this.refreshData()
		},
		onReachBottom() {
			this.loadMore()
		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.page {
		width: 100%;
		height: auto;
		min-height: 100vh;
		background: #10191F;
		box-sizing: border-box;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	text {
		color: #ffffff;
	}

	.top {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 690rpx;
		height: auto;
		box-sizing: border-box;
		padding: 36rpx 44rpx;
		margin-top: 62rpx;
	}

	.top-tip {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 12rpx;
	}

	.top-price {
		width: 100%;
		height: auto;
		margin-top: 48rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		gap: 4rpx;
	}

	.top-price-right {
		flex: 1;
		width: 50%;
	}

	.top-rail {
		width: 100%;
		height: auto;
		margin-top: 48rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		gap: 24rpx;
	}

	.rail {
		width: calc((100% - 24rpx)/2);
		gap: 24rpx;
		height: auto;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
	}

	.rail-title {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.icon {
		flex: 1;
		width: 26rpx;
		height: 26rpx;
		margin-left: 12rpx;
	}

	.rail-price {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.btns {
		box-sizing: border-box;
		padding: 16rpx 48rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.h3 {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.h2 {
		font-size: 32rpx;
	}

	.h1 {
		font-family: 'iconfont2';
		font-size: 60rpx;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 690rpx;
		height: auto;
		min-height: 786rpx;
		box-sizing: border-box;
		padding: 40rpx 44rpx;
		margin-top: 34rpx;
	}

	.tabs {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 24rpx;
	}

	.tab-title {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.6);
	}

	.active {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.items {
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 48rpx;
		gap: 48rpx;
	}

	.item {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		gap: 12rpx;
	}

	.item-left {
		flex: 1;
		max-width: 40%;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.item-lt {
		width: 100%;
		flex: 1;
	}

	.item-lb {
		width: 100%;
		flex: 1;
	}

	.item-right {
		flex: 1;
		max-width: 60%;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.item-rt {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.item-price {
		max-width: 100%;
		display: flex;
		flex-direction: row;
	}

	.ip-r {
		flex: 1;
		max-width: 100%;
	}

	.item-rb {
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
	}

	.border {
		box-shadow: inset 0rpx 0rpx 30rpx 0rpx #1C85DB;
	}

	.text-parent {
		max-width: 100%;
		display: block;
		word-wrap: break-word;
		overflow-wrap: break-word;
		/* 允许在单词之间换行 */
		/* 或者使用 overflow-wrap: break-word; */
		white-space: normal;
		/* 允许正常换行 */
	}

	.divider {
		margin-top: 24rpx;
		width: 100%;
		height: 4rpx;
		background: linear-gradient(90deg, #3F7097 0%, #172630 100%)
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		height: auto;
		box-sizing: border-box;
		padding: 58rpx 42rpx;
		background-image: url('../../static/image/car_popup_bg.png');
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;

	}
	.popup-center{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		overflow: auto;
		max-height: 512rpx;
	}
</style>